<template>
	<view>
		<div class="first-card">
			<div class="top-background"></div>
			<div class="personal-card">
				<u-row class="up-block">
					<u-col offset="0.5" :span="3">
						<div class="head-img">
							<up-image :src="`../../static/${userMessage.candidateImg}`" width="70px" height="70px" shape="circle"></up-image>
						</div>
					</u-col>
					<u-col span="6">
						<u-row>
							<up-text size="20px" :bold="true" margin="10px" :text="userMessage.name"></up-text>
						</u-row>
						<u-row style="margin-top: 10px">
							<u-col span="4">
								<up-text size="15px" type="primary" align="center" :text="userMessage.identity"></up-text>
							</u-col>
							<u-col span="4">
								<up-text size="15px" align="center" :text="userMessage.address"></up-text>
							</u-col>
							<u-col span="6">
								<up-text size="15px" align="center" :text="`余额: ${userMessage.wallet}`"></up-text>
							</u-col>
						</u-row>
					</u-col>
					<up-text @click="toOnlineResume" suffixIcon="arrow-rightward" iconStyle="font-size: 10px" size="10px" type="info" text="在线简历"></up-text>
				</u-row>
				<u-row class="down-block">
					<up-row justify="space-between" gutter="10" style="margin-left: 5px">
						<up-col span="4.5" textAlign="center">
							<up-text text="66" size="20px" :bold="true" align="center"></up-text>
							<up-text text="沟通过" align="center"></up-text>
						</up-col>
						<up-col span="5" textAlign="center">
							<up-text text="102" size="20px" :bold="true" align="center"></up-text>
							<up-text text="已投简历" align="center"></up-text>
						</up-col>
						<up-col span="4.5" textAlign="center">
							<up-text text="68" size="20px" :bold="true" align="center"></up-text>
							<up-text text="待面试" align="center"></up-text>
						</up-col>
						<up-col span="4" textAlign="center">
							<up-text text="99" size="20px" :bold="true" align="center"></up-text>
							<up-text text="收藏" align="center"></up-text>
						</up-col>
					</up-row>
				</u-row>
			</div>
			<div class="function">
				<up-row justify="space-between" gutter="10">
					<up-col @click="toOnlineResume" span="3" textAlign="center" style="margin-top: 20px">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(70,146,221,1)">
							<path
								d="M4 2C3.44772 2 3 2.44772 3 3V5H5V4H19V20H5V19H3V21C3 21.5523 3.44772 22 4 22H20C20.5523 22 21 21.5523 21 21V3C21 2.44772 20.5523 2 20 2H4ZM9 16C9 14.3431 10.3431 13 12 13C13.6569 13 15 14.3431 15 16H9ZM12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 11.1046 13.1046 12 12 12ZM6 9V7H2V9H6ZM6 11V13H2V11H6ZM6 17V15H2V17H6Z"
							></path>
						</svg>
						<up-text text="在线简历" align="center"></up-text>
					</up-col>
					<up-col span="3" textAlign="center" style="margin-top: 20px">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(150,218,183,1)">
							<path
								d="M3 2H19.0049C20.1068 2 21 2.89821 21 3.9908V20.0092C21 21.1087 20.1074 22 19.0049 22H3V2ZM7 4H5V20H7V4ZM9 20H19V4H9V20ZM11 16C11 14.3431 12.3431 13 14 13C15.6569 13 17 14.3431 17 16H11ZM14 12C12.8954 12 12 11.1046 12 10C12 8.89543 12.8954 8 14 8C15.1046 8 16 8.89543 16 10C16 11.1046 15.1046 12 14 12ZM22 6H24V10H22V6ZM22 12H24V16H22V12Z"
							></path>
						</svg>
						<up-text text="附件简历" align="center"></up-text>
					</up-col>
					<up-col @click="toWorkIntention" span="3" textAlign="center" style="margin-top: 20px">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(234,113,46,1)">
							<path
								d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM2 4C2 3.44772 2.44772 3 3 3H14V5H4V19H20V11H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM7 13H9V17H7V13ZM11 7H13V17H11V7ZM15 10H17V17H15V10Z"
							></path>
						</svg>
						<up-text text="求职意向" align="center"></up-text>
					</up-col>
					<up-col span="3" textAlign="center" style="margin-top: 20px">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(174,161,255,1)">
							<path
								d="M19.9381 8H21C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8ZM3 10V14H4V10H3ZM20 10V14H21V10H20ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z"
							></path>
						</svg>
						<up-text text="客服聊天" align="center"></up-text>
					</up-col>
				</up-row>
			</div>
		</div>
		<div class="second-card">
			<up-row style="height: 50%">
				<up-col span="2" text-align="center">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(255,192,68,1)">
						<path
							d="M12.0049 22.0027C6.48204 22.0027 2.00488 17.5256 2.00488 12.0027C2.00488 6.4799 6.48204 2.00275 12.0049 2.00275C17.5277 2.00275 22.0049 6.4799 22.0049 12.0027C22.0049 17.5256 17.5277 22.0027 12.0049 22.0027ZM13.0049 13.0027V12.0027H16.0049V10.0027H13.4191L15.5404 7.88143L14.1262 6.46721L12.0049 8.58853L9.88356 6.46721L8.46935 7.88143L10.5907 10.0027H8.00488V12.0027H11.0049V13.0027H8.00488V15.0027H11.0049V17.0027H13.0049V15.0027H16.0049V13.0027H13.0049Z"
						></path>
					</svg>
				</up-col>
				<up-col>
					<up-text text="充值" size="17px" :bold="true"></up-text>
				</up-col>
			</up-row>
			<up-row style="height: 50%">
				<up-col span="2" text-align="center">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(49,210,247,1)">
						<path
							d="M4.87759 3.00275H19.1319C19.4518 3.00275 19.7524 3.15583 19.9406 3.41457L23.7634 8.67097C23.9037 8.86385 23.8882 9.12895 23.7265 9.30419L12.3721 21.6047C12.1848 21.8076 11.8685 21.8203 11.6656 21.633C11.6558 21.6239 11.6464 21.6145 11.6373 21.6047L0.282992 9.30419C0.121226 9.12895 0.10575 8.86385 0.246026 8.67097L4.06886 3.41457C4.25704 3.15583 4.55766 3.00275 4.87759 3.00275Z"
						></path>
					</svg>
				</up-col>
				<up-col>
					<up-text text="升级VIP" size="17px" :bold="true"></up-text>
				</up-col>
			</up-row>
		</div>
		<div class="third-card">
			<up-row style="height: 50%">
				<up-col span="2" text-align="center">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(10,19,213,1)">
						<path
							d="M12 21.9967C6.47715 21.9967 2 17.5196 2 11.9967C2 6.47386 6.47715 1.9967 12 1.9967C17.5228 1.9967 22 6.47386 22 11.9967C22 17.5196 17.5228 21.9967 12 21.9967ZM5.32889 16.422C6.76378 18.5675 9.20868 19.9803 11.9836 19.9803C16.4018 19.9803 19.9836 16.3985 19.9836 11.9803C19.9836 9.2053 18.5707 6.76034 16.4251 5.32547C17.2705 8.35324 16.5025 11.7369 14.1213 14.1181C11.7401 16.4993 8.3566 17.2672 5.32889 16.422Z"
						></path>
					</svg>
				</up-col>
				<up-col>
					<up-text text="夜间模式" size="17px" :bold="true"></up-text>
				</up-col>
			</up-row>
			<up-row style="height: 50%">
				<up-col span="2" text-align="center">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="rgba(173,184,194,1)">
						<path
							d="M5.33409 4.54491C6.3494 3.63637 7.55145 2.9322 8.87555 2.49707C9.60856 3.4128 10.7358 3.99928 12 3.99928C13.2642 3.99928 14.3914 3.4128 15.1245 2.49707C16.4486 2.9322 17.6506 3.63637 18.6659 4.54491C18.2405 5.637 18.2966 6.90531 18.9282 7.99928C19.5602 9.09388 20.6314 9.77679 21.7906 9.95392C21.9279 10.6142 22 11.2983 22 11.9993C22 12.7002 21.9279 13.3844 21.7906 14.0446C20.6314 14.2218 19.5602 14.9047 18.9282 15.9993C18.2966 17.0932 18.2405 18.3616 18.6659 19.4536C17.6506 20.3622 16.4486 21.0664 15.1245 21.5015C14.3914 20.5858 13.2642 19.9993 12 19.9993C10.7358 19.9993 9.60856 20.5858 8.87555 21.5015C7.55145 21.0664 6.3494 20.3622 5.33409 19.4536C5.75952 18.3616 5.7034 17.0932 5.0718 15.9993C4.43983 14.9047 3.36862 14.2218 2.20935 14.0446C2.07212 13.3844 2 12.7002 2 11.9993C2 11.2983 2.07212 10.6142 2.20935 9.95392C3.36862 9.77679 4.43983 9.09388 5.0718 7.99928C5.7034 6.90531 5.75952 5.637 5.33409 4.54491ZM13.5 14.5974C14.9349 13.7689 15.4265 11.9342 14.5981 10.4993C13.7696 9.0644 11.9349 8.57277 10.5 9.4012C9.06512 10.2296 8.5735 12.0644 9.40192 13.4993C10.2304 14.9342 12.0651 15.4258 13.5 14.5974Z"
						></path>
					</svg>
				</up-col>
				<up-col>
					<up-text text="设置" size="17px" :bold="true"></up-text>
				</up-col>
			</up-row>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userMessage: {
				account: '',
				address: '',
				age: '',
				candidateImg: '',
				education: '',
				email: '',
				idCard: '',
				identity: '',
				name: '',
				password: '',
				recommendedStatus: '',
				aschool: '',
				sex: '',
				status: '',
				wallet: ''
			}
		};
	},
	methods: {
		getPersonalMessage() {
			this.$api.getCandidateMessage({candidateId:1}).then((res) => {
				this.userMessage = res.data;
				let province = res.data.address.split('-')[0];
				res.data.address = province;
			});
		},
		toOnlineResume() {
			uni.navigateTo({
				url: '/pages/personal/onlineResumeView'
			});
		},
		//前往工作意向
		toWorkIntention(){
			uni.navigateTo({
				url:'/pages/positions/job'
			})
		},
	},
	created() {
		this.getPersonalMessage();
	}
};
</script>

<style lang="scss">
body {
	background-color: #f8f8f8;
}

.top-background {
	width: 100%;
	height: 200px;
	background-color: #59a0ff;
	// border: 1px solid red;
	border-radius: 0 0 60px 60px;
}

.personal-card {
	margin: auto;
	margin-top: -150px;
	width: 90%;
	height: 200px;
	background-color: white;
	border-radius: 12px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	// border: 1px solid red;
}

.first-card {
	width: 100%;
	height: 350px;
	// border: 1px solid red;
	display: flex;
	/* 使用Flexbox布局 */
	flex-direction: column;
	/* 垂直方向排列子元素 */
}

.head-img {
	// border: 1px solid blue;
}

.up-block {
	/* height: 100vh;          /* 设置容器高度，根据需要调整 */
	// border: 1px solid green;
	height: 50%;
}

.down-block {
	height: 50%;
	// border: 1px solid blue;
}

.wrap {
	padding: 12px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

.bg-purple {
	background: #ced7e1;
}

.bg-purple-light {
	background: #e5e9f2;
}

.bg-purple-dark {
	background: #99a9bf;
}

.function {
	// border: 1px solid red;
	width: 100%;
	height: 100px;
}

.second-card {
	width: 100%;
	height: 100px;
	// border: 1px solid blueviolet;
	margin-top: 15px;
	background-color: white;
}

.third-card {
	width: 100%;
	height: 100px;
	// border: 1px solid blue;
	margin-top: 15px;
	background-color: white;
}
</style>
